<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>C端-人才</el-breadcrumb-item>
			<el-breadcrumb-item>人才类型变更</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="pt_5 px_15">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl" round size="mini" @click="add">新增变更</el-button>
						<el-button type="default" round size="mini" @click="download">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form
							:inline="true"
							:rules="queryFormRule"
							:model="queryForm"
							class="form-inline"
							@keyup.enter.native="search"
						>
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="queryForm.staff_name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item prop="mobile">
								<el-input size="mini" class="w_110" v-model="queryForm.mobile" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="创建开始时间"
									v-model="queryForm.start_time"
								/>
							</el-form-item>
							<span>~</span>
							<el-form-item prop="end_time">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="创建结束时间"
									v-model="queryForm.end_time"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="search">
								搜索
							</el-button>
							<el-button size="mini" round @click="reset">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<el-table :data="list" stripe ref="multipleTable" :show-overflow-tooltip="false">
						<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
						<el-table-column prop="staff_name" label="姓名">
							<template slot-scope="{ row }">
								<span class="text-primary" @click="toPersonList(row)" type="primary">{{ row.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="mobile" label="手机号"> </el-table-column>
						<el-table-column prop="work_type_old" label="原人才类型">
							<template slot-scope="{ row }">
								<span>{{ staffStatusInt2Text(row.work_type_old) }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="work_type_new" label="新人才类型">
							<template slot-scope="{ row }">
								<span type="text-primary">{{ staffStatusInt2Text(row.work_type_new) }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="effective_date" label="生效日期"></el-table-column>
						<el-table-column prop="status" label="状态">
							<template slot-scope="{ row }">
								<span v-if="+row.status === 2">{{ logStatusInt2Text(row.status) }}</span>
								<span class="text-success" v-if="+row.status === 1">{{ logStatusInt2Text(row.status) }}</span>
								<span class="text-danger" v-if="+row.status === 3">{{ logStatusInt2Text(row.status) }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="创建人" align="center"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="200"></el-table-column>
						<el-table-column prop="abnormal_type_name" label="操作">
							<template slot-scope="{ row }">
								<span class="text-primary" v-if="+row.status === 2" @click="discard(row)" style="cursor: pointer;"
									>作废</span
								>
							</template>
						</el-table-column>
					</el-table>

					<page :total="total" :pageNums="queryForm.page" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>

		<!--    新增-->
		<el-dialog
			title="新增变更"
			:visible.sync="showModifyDialog"
			:close-on-click-modal="false"
			@close="closeAddDialog"
			class="add-change-log"
			width="655px"
		>
			<el-form
				inline
				:model="addForm"
				:rules="addFormRule"
				ref="addFormRef"
				label-width="80px"
				class="personnel-type-modify-add-form"
			>
				<el-form-item label="姓名" prop="staff_name">
					<el-autocomplete
						:disabled="lock"
						v-model="addForm.staff_name"
						:fetch-suggestions="(query, cb) => fetchUserInfo('name', query, cb)"
						:trigger-on-focus="false"
						value-key="staff_name"
						placeholder="请输入姓名"
						@select="handleSelect"
					/>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
					<el-autocomplete
						:disabled="lock"
						v-model="addForm.mobile"
						:fetch-suggestions="(query, cb) => fetchUserInfo('mobile', query, cb)"
						:trigger-on-focus="false"
						value-key="mobile"
						placeholder="请输入手机号"
						@select="handleSelect"
					/>
				</el-form-item>
				<el-form-item label="原人才类型">
					<el-input :value="staffStatusInt2Text(addForm.work_type_old)" disabled></el-input>
				</el-form-item>
				<el-form-item label="变更类型">
					<el-select v-model="addForm.work_type_new" placeholder="变更类型">
						<el-option label="兼职" value="1" :disabled="+addForm.work_type_new === 2"></el-option>
						<el-option label="全职" value="2" :disabled="+addForm.work_type_new === 1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="生效日期">
					<el-date-picker
						size="mini"
						type="date"
						value-format="yyyy-MM-dd"
						format="yyyy-MM-dd"
						placeholder="创建开始时间"
						:picker-options="{ disabledDate }"
						v-model="addForm.effective_date"
					/>
				</el-form-item>
			</el-form>
			<el-button @click="cleanPersonnel" type="warning" size="mini" class="clean">清空</el-button>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showModifyDialog = false">取 消</el-button>
				<el-button type="primary" @click="addModifyLog">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { staffChangeList, staffChangeCreate, staffChangeInvalid } from '@/api/staff'
import { fetchUsers } from '@/api/user'
import qs from 'qs'
import dayjs from 'dayjs'

const common = require('../../../static/tool.js')
const LOG_STATUS = {
	2: '已创建',
	1: '已生效',
	3: '已作废'
}

const STAFF_STATUS = {
	1: '兼职',
	2: '全职'
}

export default {
	name: 'PersonnelTypeModify',
	data() {
		const checkPhone = (rule, value, callback) => {
			if (value && !/^1[3456789]\d{9}$/gi.test(value)) {
				callback(new Error('请输入正确的手机号'))
			}

			callback()
		}

		return {
			queryForm: {
				staff_name: '',
				mobile: '',
				start_time: '',
				end_time: '',
				operation: '',
				page: 1,
				pageSize: 20
			},
			queryFormRule: {
				mobile: [{ validator: checkPhone, trigger: 'change' }]
			},
			addForm: {
				staff_sn: '',
				staff_name: '',
				mobile: '',
				work_type_old: '',
				work_type_new: '',
				effective_date: ''
			},
			addFormRule: {
				staff_name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
				mobile: [
					{ required: true, message: '请输入手机号', trigger: 'change' },
					{ validator: checkPhone, trigger: 'change' }
				]
			},
			lock: false,
			list: [],
			total: 0,
			showModifyDialog: false
		}
	},
	methods: {
		logStatusInt2Text(status) {
			return LOG_STATUS[status]
		},
		staffStatusInt2Text(status) {
			return STAFF_STATUS[status]
		},
		async search(page) {
			try {
				if (page) {
					this.queryForm.page = 1
				}

				if (this.queryForm.start_time) {
					this.queryForm.start_time = dayjs(this.queryForm.start_time).format('YYYY-MM-DD HH:mm:ss')
				}

				if (this.queryForm.end_time) {
					this.queryForm.end_time = dayjs(this.queryForm.end_time).format('YYYY-MM-DD')
					this.queryForm.end_time += ' 23:59:59'
				}

				let res = await staffChangeList(this.queryForm)

				this.total = res.count
				this.list = res.list
			} catch (err) {
				console.log('err', err)
			}
		},
		toPersonList(row) {
			const { href } = this.$router.resolve({
				path: '/personnelList',
				query: { name: row.staff_name }
			})
			window.open(href, '_blank')
		},
		// 重置
		reset() {
			for (const key in this.queryForm) {
				if (key !== 'pageSize') {
					this.queryForm[key] = ''
				}
			}
			this.queryForm.page = 1

			this.search()
		},
		// 导出
		download() {
			const token = window.sessionStorage.getItem('token')
			window.location.href =
				common.url + '/staffchange/getList?' + qs.stringify({ ...this.queryForm, token, operation: 'export' })
		},
		closeAddDialog() {
			this.$refs.addFormRef.resetFields()
			this.lock = false
			this.addForm.effective_date = ''
			this.addForm.work_type_old = ''
			this.addForm.work_type_new = ''
		},
		disabledDate(date) {
			return date.getTime() < Date.now()
		},
		// 搜索
		async fetchUserInfo(field, query, cb) {
			try {
				let result = await fetchUsers({
					[field]: query
				})

				result = result.list.map(it => {
					return {
						staff_id: it.id,
						staff_sn: it.staff_sn,
						mobile: it.mobile,
						staff_name: it.name,
						work_type_old: it.work_type
					}
				})
				// 将数据回调回去显示
				cb(result)
			} catch (err) {
				console.log('err', err)
			}
		},
		// 选择下拉数据
		handleSelect(it) {
			this.addForm.staff_id = it.staff_id
			this.addForm.staff_sn = it.staff_sn
			this.addForm.staff_name = it.staff_name
			this.addForm.mobile = it.mobile
			this.addForm.work_type_old = it.work_type_old
			this.addForm.work_type_new = 3 - it.work_type_old + ''
			this.lock = true
		},
		// 重新选择
		cleanPersonnel() {
			this.addForm.staff_id = ''
			this.addForm.staff_sn = ''
			this.addForm.staff_name = ''
			this.addForm.mobile = ''
			this.addForm.work_type_old = ''
			this.addForm.work_type_new = ''
			this.lock = false
		},
		// 增加
		add() {
			this.showModifyDialog = true
		},
		async addModifyLog() {
			let validate = await this.$refs.addFormRef.validate().catch(err => err)
			if (!validate) return

			try {
				let res = await staffChangeCreate(this.addForm)
				console.log('res: ', res)

				this.$message({
					message: '人才类型变更记录新增成功!',
					type: 'success'
				})

				this.showModifyDialog = false

				this.search()
			} catch (err) {
				// this.$message.error('人才类型变更记录新增失败!')
			}
		},
		async discard(row) {
			const confirmrRet = await this.$confirm('确定要作废这条变更记录码?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).catch(err => err)

			if (confirmrRet === 'cancel') {
				return
			}

			try {
				await staffChangeInvalid({ id: row.id })

				row.status = 3

				this.$message({
					message: '人才类型变更记录作废成功!',
					type: 'success'
				})
			} catch (err) {
				this.$message.error('人才类型变更记录作废失败!')
			}
		},
		// 翻页
		onChildValue(item) {
			this.queryForm.page = item[0]
			this.queryForm.pageSize = item[1]
			this.search()
		}
	}
}
</script>

<style scoped>
.el-col {
	margin-bottom: 10px;
}
.el-form-item {
	margin-bottom: 22px;
}

.add-change-log {
	/*position: relative;*/
}

.add-change-log .clean {
	position: absolute;
	top: 84px;
	right: 10px;
}

.text-primary {
	text-decoration: underline;
	cursor: pointer;
}
</style>

<style>
.personnel-type-modify-add-form .el-form-item:first-child .el-input__inner {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.personnel-type-modify-add-form .el-select .el-input__inner {
	padding-right: 10px;
}

.personnel-type-modify-add-form .el-date-editor.el-input {
	width: 168px;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelTypeModify.vue